import React, { Component } from 'react';
import { Button } from 'semantic-ui-react'
import logo from '../img/logo.svg';
import 'semantic-ui-css/semantic.min.css';

const sideLength = 2;



class TableButtonGroup extends Component {

  render() {
    let paginationButtons = [];
    let {dataCount, pageLength, pageIndex} = this.props;
    if (dataCount > pageLength) {
      let ellipsed = false;
      for (var i = 0; i < dataCount/pageLength; i++) {
        /*
          show page numbers if pageIndex within:
          (0, sideLength) || (i-sideLength, i+sideLength) || (maxPage - sideLength, maxPage)
          otherwise, show ellipsis 
        */
        if ( i <= (sideLength - 1) || i <= pageIndex + sideLength && i >= pageIndex - sideLength || i >= dataCount / pageLength - sideLength  ) {
          paginationButtons.push(
            <Button color={(pageIndex==i)?'blue':''} pageIndex={i} onClick={this.props.buttonOnClick}>{i+1}</Button>
          )
        } else if ( !ellipsed ){
          paginationButtons.push(
            <Button>...</Button>
          )
          ellipsed = true;
        }
      }
    }

    return (
      <Button.Group floated='left' size='mini'>
        {paginationButtons}
      </Button.Group>
    );
  }
}

export default TableButtonGroup;
